<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<?php include("includes/nav.php"); ?>
<?php $xml=simplexml_load_file('includes/gallery.xml'); ?>
				
<head> 
	<title></title>
	<meta name="keywords" content="" /> 
	<meta name="description" content="" /> 	
	<?php include("includes/head.php"); ?>
	
	<script type="text/javascript" src="includes/jquery.js"></script>
	<script type="text/javascript">		
		function loadImages(imgArray){
			$('#imageContainer').empty();
			$('#imageContainer').addClass('loading');
			
			for(i=0;i<imgArray.length;i++){
				var a = document.createElement('a');
				$(a).attr('href', 'images/' + imgArray[i]);
				$(a).attr('target', '_blank');
				
				var img = new Image();
				$(img).attr('src', 'images/' + imgArray[i]);
				$(img).load(function () {
					$(this).hide();
					$('#imageContainer').append($(this).parent());
					$('#imageContainer').removeClass('loading');
					$(this).fadeIn('fast');
				})
				$(img).error(function () {
					alert("Image not found!");
				})
				
				$(a).append(img);
			}
		}
		
		// when the DOM is ready
		$(document).ready(function(){
			<?php			
			if(isset($_GET['id']) && $_GET['id'] != "")  
				$idToDisplay = $_GET['id'];
			else  
				$idToDisplay = 1;
			$imagePathsToDisplay = "";
			
			foreach($xml as $item){
				$imagePaths = "";
				$numberOfImages = count($item->imagePath);
				$counter = 0;
				
				if($numberOfImages > 1){
					foreach($item->imagePath as $imagePath)
					{
						$counter++;
						$imagePaths = $imagePaths."'".$imagePath."'";
						if($counter != $numberOfImages){
							$imagePaths = $imagePaths.",";
						}
					}
				}
				else{
					$imagePaths = "'".$item->imagePath."'";
				}
				
				if($item['id'] == $idToDisplay){
					$imagePathsToDisplay = $imagePaths;
				}
				echo "$('#thumb".$item['id']."').click(function() { loadImages(new Array(".$imagePaths.")); });\n";
			}
			
			echo "loadImages(new Array(".$imagePathsToDisplay."));";
			?>
		});
	</script>
</head>
<body> 
	<div id="wrapper">
		<div id="header">
			<a href="index.php" class="logo"><img src="images/wishbow-logo.gif" alt="Pam Wishbow's Logo" /></a>
			<ul class="contact">
				<li>illustrator</li>
				<li>732.259.3119</li>
				<li>pamwishbow@gmail.com</li>
			</ul>
			<?php DisplayNav("index.php"); ?>
		</div>
		<div id="wishbow-sidebar">
			<img src="images/flickr-icon.gif" alt="Flickr icon" />
			<img src="images/facebook-icon.gif" alt="Facbook icon" />
			<img src="images/twitter-icon.gif" alt="Twitter icon" />
			<img class="last" src="images/tumblr-icon.gif" alt="Tumblr icon" />
		</div>
		<div id="content">
			<h1 class="art">
				<span></span>
				Why Hello There.
				<br />
				Care to Take a Look?
			</h1>
			
			<div class="col1">
				<img class="thumb" src="images/thumbs/thumb1.jpg" alt="thumbnail 1" />
				<img class="thumb" src="images/thumbs/thumb4.jpg" alt="thumbnail 4" />
			</div>
			<div class="col2">
				<img class="thumb" src="images/thumbs/thumb2.jpg" alt="thumbnail 2" />
				<img class="thumb" src="images/thumbs/thumb5.jpg" alt="thumbnail 5" />
			</div>
			<div class="col3">
				<img class="thumb" src="images/thumbs/thumb3.jpg" alt="thumbnail 3" />
				<img class="thumb" src="images/thumbs/thumb6.jpg" alt="thumbnail 6" />
			</div>
			
			<!--
			<div id="thumbContainer">
				<?php					
				foreach($xml as $item){
					echo "<img id='thumb".$item['id']."' src='images/".$item->thumbPath."' alt='Thumbnail ".$item['id']."' />\n";
				}
				?>
			</div>
			<div id="imageContainer" style="text-align:center;">
				<img 
			</div>
			-->
		</div>
	</div>
</body> 
</html> 